<template>
    <div class="quick-filter-container">
        <!-- 姓氏筛选 -->
        <div class="filter-section">
            <span class="filter-label">{{ $t('quick-filter.label_1') }}</span>
            <div class="filter-options">
                <el-radio-group v-model="lastNameFilter" @change="emitFilters">
                    <el-radio-button :label="$t('quick-filter.btn')" value="all" />
                    <el-radio-button v-for="letter in letters" :key="'last-' + letter" :label="letter" :value="letter" />
                </el-radio-group>
            </div>
        </div>

        <!-- 名字筛选 -->
        <div class="filter-section">
            <span class="filter-label">{{ $t('quick-filter.label_2') }}</span>
            <div class="filter-options">
                <el-radio-group v-model="firstNameFilter" @change="emitFilters">
                    <el-radio-button :label="$t('quick-filter.btn')" value="all" />
                    <el-radio-button v-for="letter in letters" :key="'first-' + letter" :label="letter" :value="letter" />
                </el-radio-group>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

// 筛选条件
const lastNameFilter = ref<string>('all')
const firstNameFilter = ref<string>('all')

// 定义emit类型
interface FilterParams {
    lastName: string
    firstName: string
}

const emit = defineEmits<{
    (e: 'filter-change', params: FilterParams): void
}>()

// 向父组件发射筛选条件
const emitFilters = () => {
    emit('filter-change', {
        lastName: lastNameFilter.value,
        firstName: firstNameFilter.value,
    })
}
</script>

<style lang="less" scoped>
.quick-filter-container {
    padding-bottom: 15px;

    .filter-section {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 8px;

        .filter-label {
            font-size: 16px;
            color: #606266;
        }

        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;

            :deep(.el-radio-group) {
                .el-radio-button {
                    --el-radio-button-checked-bg-color: #f06423;
                    --el-radio-button-checked-border-color: #f06423;

                    .el-radio-button__inner {
                        padding: 6px 8px;
                        font-size: 14px;
                    }

                    &:not(.is-active) {
                        .el-radio-button__inner:hover {
                            color: #f06423;
                            background-color: #e9ecef;
                        }
                    }
                }
            }
        }
    }
}
</style>
